<template>
	<view id="domxee-content" :class="globalData.defaultThemes">
		<view id="header_wrapper">
			<nii-navbar :globalData="globalData" :scroll="scroll" back>
				<view slot="title">
					<view id="title" class="fw-bolder">商品详情</view>
				</view>
			</nii-navbar>
		</view>
		<view id="content_wrapper">
			<view id="albums">
				<view class="albums">
					<view class="albums_box">
						<swiper :duration="1000" :interval="3000" class="swiper">
							<swiper-item class="swiper_box container" v-for="(album, index) in renders.albums" :key="index">
								<view class="swiper-item">
									<u--image :src="album" width="750rpx" height="750rpx"  mode="aspectFit" :bgColor="globalData.colors.current.section" class="album">
									  <template v-slot:loading>
									     <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
									  </template>
									  <template v-slot:error>
									     <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
									  </template>
									</u--image>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<view id="infos">
				<view class="infos d-padding">
					<view class="infos_box section">
						<view class="info d-flex justify-content-between align-items-center">
							<view class="prices d-flex align-items-center">
								<view class="price color fw-bolder"><span>¥</span>{{renders.price}}</view>
							</view>
							<view class="sales vice_text">
								{{ renders.cate_name }}
							</view>
						</view>
						<view class="title fw-bolder u-line-2">{{renders.title}}</view>
						<view class="description vice_text u-line-1">{{renders.description}}</view>
						<!-- <view class="tag bg" v-if="renders.tag.length > 0">{{renders.tag}}</view> -->
					</view>
				</view>
			</view>
			<view id="pictures">
				<view class="pictures">
					<view class="pictures_box">
						<view class="picture_box overflow-hidden" v-for="(picture, index) in renders.pictures" :key="index">
							<u--image :src="picture" width="100%" height="auto" mode="widthFix" :bgColor="globalData.colors.current.section" class="picture">
							  <template v-slot:loading>
							     <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
							  </template>
							  <template v-slot:error>
							     <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
							  </template>
							</u--image>
						</view>
					</view>
				</view>
			</view>
			<!-- <view id="lists" v-if="renders.lists.length > 0">
				<view class="lists d-padding">
					<view class="lists_box">
						<view class="title fw-bolder">为您推荐</view>
						<view id="domxee_good_lists">
							<view class="good_lists_box d-flex align-items-center flex-wrap">
								<view class="good" v-for="(good, index) in renders.lists" :key="index" @click="navigateAction(good.alias, good.params)">
									<view class="good_box section">
										<view class="good_cover_box">
											<u--image :src="good.cover" width="340rpx" height="340rpx" radius="20rpx 20rpx 0rpx 0rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="good_cover">
											  <template v-slot:loading>
												 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
											  </template>
											  <template v-slot:error>
												 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
											  </template>
											</u--image>
										</view>
										<view class="good_title fw-bolder u-line-2">{{good.title}}</view>
										<view class="good_infos">
											<view class="good_sale_info d-flex align-items-center justify-content-between">
												<view class="good_price color fw-bolder">¥{{good.price}}</view>
												<view class="good_sale_count vice_text">浏览{{good.view_count}}</view>
											</view>
											<view class="good_tag_info d-flex align-items-center">
												<s class="good_market_price less_text">{{good.market_price}}</s>
												<view class="good_tag bg" v-if="good.tag.length > 0">{{good.tag}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<!-- <view id="footer" class="position-fixed left-0 bottom-0 w-100 bg-white">
				<view id="footer_box" class="h-100 d-flex a-center j-sa">
					<view class="button fw-bold border-color color" @click="insertCart(false)">加入购物车</view>
					<view class="button fw-bold bg" @click="insertCart(true)">立即购买</view>
				</view>
			</view> -->
			<view v-if="renders.is_open_buy" id="footer" class="position-fixed left-0 bottom-0 w-100 bg-white">
				<view id="footer_box" class="h-100 d-flex a-center px-20">
					<view @click="navigateAction('cart.cart')" class="iconfont icon-gouwuchekong font-64 theme-main-color"></view>
					<view class="d-flex flex-1 j-sa ml-20">
						<view class="button fw-bold border-color color" @click="insertCart(false)">加入购物车</view>
						<view class="button fw-bold bg ml-30" @click="insertCart(true)">立即购买</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globalData: {windowWidth: 0, statusBarHeight: 0, navHeight: 0, navigationBarHeight: 0, wechatCapsule: {width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0}, defaultThemes: [], colors: {}, configs: {} },
				scroll: 0,
				current_page: {route: '', params: {}, url: ''},
				ready: false,
				options: {

				},
				styles: {

				},
				shows: {
					
				},
				renders: {
					id: 0,
					title: '',
					albums: [],
					price: '',
					cate_name: '',
					description: '',
					tags: [],
					pictures: [],
					is_open_buy: false
				},
				data: {
					sections: {

					},
				},
			}
		},
		onReady() {						//页面渲染完毕后操作（动态获取/调整元素宽高位置等需在ready后获取最为准确）
			//设置对象
			let that = this;

		},
		onShow() {						//页面显示后操作（关闭、后台运行等操作后重新打开访问触发、可在实时性较高操作页面进行全页刷新）
			//设置对象
			let that = this;
			//判断是否准备就绪
			if (that.ready) {
				//初始数据
				that.initInformation();
			}
		},
		onLoad(options) {				//页面加载时操作（options可获取当前页面传递参数，如：options.id）
			//设置对象
			let that = this;
			//设置当前页面数据
			that.current_page = that.nii_common.pages.getCurrentUrl();
			//设置默认数据
			that.globalData = that.nii_common.pages.initGlobalData(getApp().globalData);
			//设置参数
			that.options = options;
			//初始数据
			that.initInformation();
		},
		methods: {
			//默认跳转操作
			navigateAction: function(alias, requestParams = {}, action = 'navigate', authenticate = false, animationType = 'slide-in-right') {
				//跳转页面
				this.nii_common.navigate.action(alias, requestParams, action, authenticate, animationType);
			},
			initInformation: function() {
				//设置对象
				let that = this;
				//loading
				!that.ready && that.nii_common.toastLoading('加载中');
				//开始准备
				that.ready = false;
				//发起请求
				that.nii_common.request.build('goods/detail', that.options, 'GET', function (res) {
					//设置准备已就绪
					that.ready = true;
					//设置信息
					that.renders = res.data;
				}, function (res) {
					//提示错误
					that.nii_common.toastAlert(res.msg);
					//延迟返回首页
					// setTimeout(function () {
					// 	//返回首页
					// 	that.navigateAction('index');
					// }, 1500);
				}, function(res) {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				});	
			},
			insertCart: function (settlement = false) {
				//设置对象
				let that = this;
				//loading
				that.nii_common.toastLoading('正在处理');
				//发起请求
				that.nii_common.request.build('cart/add', {goods_id: that.renders.id}, 'POST', function (res) {
					//判断是否立即跳转
					if (settlement) {
						//跳转结算页面
						that.navigateAction('cart.settlement', res.data);
					} else {
						//提示成功
						that.nii_common.toastAlert('加入购物车成功', 'success');
					}
				}, function (res) {
					//提示错误
					that.nii_common.toastAlert(res.msg);
				}, function(res) {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				}, true);	
			}
		},
		onPullDownRefresh(res) {
			//设置对象
			let that = this;
			
			//页面下拉刷新时的事件
			that.initInformation();
			
			//停止刷新
			uni.stopPullDownRefresh();	
		},
		onReachBottom() {
			//设置对象
			let that = this;
			
			//TODO：页面滑动触底时的事件
			
		},
		onPageScroll: function(e) {
			//设置页面滑动高度
			this.scroll = e.scrollTop

			//TODO：需判断滑动高度后处理的事件

		}
	}

</script>

<style lang="scss">
	#header_wrapper {
		#title {
			font-size: 40rpx;
			line-height: 48rpx;
			letter-spacing: 1rpx;
			margin-left: 10rpx;
			font-weight: 600;
		}
		#domxee_navbar_tools {
			.domxee_icon {
				font-size: 40rpx;
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 60rpx;
			}
		}
	}
	#content_wrapper {
		padding-bottom: 150rpx;
		#albums {
			.albums {
				.albums_box {
					.swiper {
						height: 750rpx;
						.swiper_box {
							height: 750rpx;
							.swiper-item {
								height: 750rpx;
								.album {
									width: 750rpx;
									height: 750rpx;
								}
							}
						}
					}
				}
			}
		}
		#infos {
			margin-top: 30rpx;
			.infos {
				.infos_box {
					padding: 30rpx 20rpx;
					border-radius: 20rpx;
					.info {
						.prices {
							.price {
								font-size: 46rpx;
								line-height: 44rpx;
								margin-right: 20rpx;
								span {
									font-size: 28rpx;
									margin-right: 8rpx;
								}
							}
							.market_price {
								font-size: 24rpx;
								line-height: 34rpx;
							}
						}
						.sales {
							font-size: 24rpx;
							line-height: 34rpx;
						}
					}
					.title {
						width: 650rpx;
						height: 80rpx;
						font-size: 28rpx;
						line-height: 40rpx;
						margin-top: 10rpx;
					}
					.description {
						width: 650rpx;
						font-size: 24rpx;
						line-height: 34rpx;
						margin-top: 10rpx;
					}
					.tag {
						margin-top: 12rpx;
						width: max-content;
						font-size: 24rpx;
						line-height: 34rpx;
						padding: 2rpx 14rpx;
						border-radius: 10rpx;
					}
				}
			}
		}
		#pictures {
			margin-top: 30rpx;
			.pictures {
				.pictures_box {
					.picrture_box {
						width: 690rpx;
					}
				}
			}
		}
		#lists {
			margin-top: 30rpx;
			.lists {
				.lists_box {
					.title {
						font-size: 36rpx;
						line-height: 50rpx;
					}
				}
			}
		}
		#footer {
			height: 150rpx;
			
			#footer_box {
				// padding: 40rpx 0;
				// display: flex;
				// align-items: center;
				// justify-content: space-between;
				.button {
					// width: max-content;
					padding: 10rpx 20rpx;
					border-radius: 40rpx;
					font-size: 28rpx;
					line-height: 40rpx;
					flex: 1;
					text-align: center;
				}
			}
		}
		// #footer {
		// 	position: fixed;
		// 	bottom: 0;
		// 	left: 0;
		// 	width: 100%;
		// 	height: 150rpx;
		// 	line-height: 150rpx;
		// 	background-color: white;
			
		// }
	}
</style>
